class Cart{
    constructor(){
        this.bottom = document.querySelector(".bottom")
        this.getData();
        this.init();
        this.addEvent()
    }
    getData(){
        if(getCookie("data")){
            this.dt = JSON.parse( getCookie("data") );   
        }else{
            this.dt = "";                
        }
   
    }
    init(){
        let str = "";
        for(var i=0;i<this.dt.length;i++){
            str += `    
                    <ul index = "${this.dt[i].goodsId}">
                        <li><input id="good3" type="checkbox"   class="check-one"  onclick="goodsCheck(this)"><img src="${this.dt[i].msg.img.largeImg[0]}"><span>${this.dt[i].msg.p}</span></li>
                        <li>￥<span class="price">${this.dt[i].msg.span}</span> <em> / ${this.dt[i].msg.s}</em></li>
                        
                        <li><input type = "number" min = "0" value = "${this.dt[i].sum}" class = "input" id="count-input" /> </li>
                        <li>￥ ${this.dt[i].msg.span *  this.dt[i].sum}</li>
                        <li><img src = "http://cart.juanpi.com/static/media/delete.91359608.png" class = "img"></li>
                    </ul>`
        }
                                
        this.bottom.innerHTML = str;
    }
    addEvent(){
        let that = this;
        this.bottom.onclick = function(eve){
            var e = eve || window.event;
            var target = e.target || e.srcElement;
            if(target.className === "img"){
              
                that.goodsId = target.parentNode.parentNode.getAttribute("index");
                target.parentNode.parentNode.remove();
                that.removeData();
            }
        }
        this.bottom.oninput = function(eve){
            var e = eve || window.event;
            var target = e.target || e.srcElement;
            if(target.className === "input"){
                that.sum = target.value;
                that.goodsId = target.parentNode.parentNode.getAttribute("index");
                that.PriceDate();
                target.parentNode.nextElementSibling.innerHTML ="￥"+(that.sum * target.parentNode.previousElementSibling.firstElementChild.innerHTML).toFixed(1);
                
            }
        }
    }
   
    removeData(){
        for(var i=0; i<this.dt.length; i++){
            if(this.dt[i].goodsId === this.goodsId){
                this.dt.splice(i,1);
                break;
            }
            
        }
        setCookie("data",JSON.stringify(this.dt),{expires:30})
    }
    PriceDate(){
        for(var i=0; i<this.dt.length; i++){
            if(this.dt[i].goodsId === this.goodsId){
                this.dt[i].sum = this.sum;
                break;
            }
            
        }
        setCookie("data",JSON.stringify(this.dt),{expires:30})
    }
 
}

new Cart();


 
let checkAllObj = document.querySelectorAll('.check-all');

checkAllObj[0].addEventListener('click', function () {

  checkAllGoods( this.checked)
});



function checkAllGoods ( state) {
  var checkOnes = document.querySelectorAll('.check-one');
  checkOnes.forEach(ele => {
    ele.checked = state;
  });

  

}

function goodsCheck (eleObj) {

    let checkAllObj = document.querySelectorAll('.check-all');
    if (!eleObj.checked) {

      checkAllObj.forEach(function (ele) {
        ele.checked = false;
      })
    } else { 
      var checkOnes = document.querySelectorAll('.check-one');
      var len = checkOnes.length;
      var counts = 0;
      checkOnes.forEach(ele => {
        if (ele.checked == true) {  
          counts++;
        }
      });
      if (len == counts) {
        checkAllObj.forEach(function (ele) {
          ele.checked = true;
        })
      }
    }
  }
